<template>
  <a-card>
    <div class="table-operations">
      <a-button v-permission="{ meta: $route.meta, permissionCode: 'ADD' }" type="primary" @click="onAdd()">新建</a-button>
    </div>
    <a-table bordered :loading="loading" :columns="columns" :rowKey="(record) => record.id" :dataSource="data" @change="handleTableChange" :pagination="pagination">
      <template v-slot:icon="icon"><a-icon :type="icon" /> {{ icon }}</template>

      <template v-slot:hideInMenu="hide">{{ dict.label['COMMON.YES_NO'][hide] }}</template>

      <template v-slot:path="path">
        <a-tag color="purple"> {{ path }}</a-tag>
      </template>

      <template v-slot:component="component">
        <a-tag color="blue"> {{ component }}</a-tag>
      </template>

      <!-- <template v-slot:url="url">
        <a-tag color="#87d068"> {{ url }}</a-tag>
      </template> -->

      <template v-slot:operation="record">
        <div class="table-row-operations">
          <a v-permission="{ meta: $route.meta, permissionCode: 'UPDATE' }" href="javascript:;" @click="onEdit(record)">修改 </a>
          <a-popconfirm v-permission="{ meta: $route.meta, permissionCode: 'DELETE' }" title="确定要删除吗?" @confirm="() => onDelete(record)">
            <a href="javascript:;">删除</a>
          </a-popconfirm>
          <a v-if="!record.children" v-permission="{ meta: $route.meta, permissionCode: 'FUNS_LIST' }" href="javascript:;" @click="onFuns(record)">功能 </a>
        </div>
      </template>
    </a-table>

    <v-form ref="form" :is-add="isAdd" @refreshTable="init" />

    <v-funs ref="funs" @refreshTable="init" />
  </a-card>
</template>
<script>
const columns = [
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '标题',
    dataIndex: 'title'
  },
  {
    title: 'Icon',
    dataIndex: 'icon',
    scopedSlots: { customRender: 'icon' }
  },
  {
    title: '菜单隐藏',
    dataIndex: 'hideInMenu',
    scopedSlots: { customRender: 'hideInMenu' }
  },
  {
    title: '前端路由',
    dataIndex: 'path',
    scopedSlots: { customRender: 'path' }
  },
  {
    title: '组件',
    dataIndex: 'component',
    scopedSlots: { customRender: 'component' }
  },
  {
    title: '排序',
    dataIndex: 'seq',
    sorter: true
  },
  // {
  //   title: 'URL',
  //   dataIndex: 'url',
  //   scopedSlots: { customRender: 'url' }
  // },
  {
    title: '操作',
    key: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]

import initData from '@/mixins/initData'
import permission from '@/directive/permission' // 权限判断指令
import VForm from './form'
import VFuns from './funs'
import { get, delCascade, getFuns } from '@/api/module'

export default {
  name: 'Module',
  components: { VForm, VFuns },
  directives: { permission },
  mixins: [initData],
  dicts: ['COMMON.YES_NO'],
  data() {
    return {
      columns,
      advanced: true,
      pagination: false
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    beforeInit() {
      // ajax query
      this.url = 'oauth/module/getTree'
      this.params = { sort: this.sort, ...this.query }
      return true
    },
    onAdd() {
      this.isAdd = true
      const _this = this.$refs.form
      _this.getMenuTree()
      _this.visible = true
    },
    async onEdit(record) {
      let res = await get(record.id)
      this.isAdd = false
      const _this = this.$refs.form
      _this.getMenuTree(record.id)
      _this.form = { ...res.data }
      _this.visible = true
    },
    async onDelete(record) {
      const key = 'delModule'
      try {
        this.$message.loading({ content: '正在删除...', key })
        let res = await delCascade(record.id)
        this.$message.success({ content: '删除成功!', key, duration: 2 })
        this.init()
      } catch (err) {
        this.$message.error({ content: '删除失败', key })
        console.error(err.message)
      }
    },
    async onFuns(record) {
      let res = await getFuns(record.id)
      const _this = this.$refs['funs']
      _this.moduleId = record.id
      _this.data = res.data
      _this.visible = true
    }
  }
}
</script>
